<template>
    <h1>7.1.2 局部注册</h1>
    <p>局部注册的组件只能用在其被注册之后的 Vue 根实例及其子组件的模板中。</p>
    <p>局部注册与全局注册最显著的区别是：局部注册在 *.vue 中注册，全局注册在 main.js 中注册</p>
    <p>同样使用 element-plus 组件库作为讲解的示例</p>
    <n-text code>npm install element-plus --save</n-text>
    <p>执行完上述指令后，在 App.vue 文件中局部注册 Button 组件</p>
    <p>实际上，由于我们使用 setup 的方式编写 Vue 组件，我们仅需要导入这个组件就可以使用了</p>
    <n-code word-wrap language="js" :code="code1"></n-code>
    <p>导入完成后，我们使用 kebab-case 的风格来使用这个组件</p>
    <n-code word-wrap language="html" :code="code2"></n-code>
    <p>注意：此时这个按钮是没有样式的，如下图</p>
    <n-image src=""></n-image>
    <p>我们需要在 main.js 中全局导入样式文件</p>
    <n-code word-wrap language="js" :code="code3"></n-code>
    <p>导入后，组件样式则显示正常，如下图。</p>
    <n-image src=""></n-image>
</template>

<script setup>
defineOptions({
    inheritAttrs: false
})

const code1 = `<script setup>
import {
  ElButton
} from 'element-plus'
<\/script>`

const code2 = `
<template>
  <el-button>按钮</el-button>
</template>`

const code3 = `import 'element-plus/dist/index.css'`
</script>